import React, { useState, useRef, useEffect } from 'react';
import { message, DatePicker, Form, Select, Divider, Layout, Tag, Tabs } from 'antd';
import PageHeader from '../components/PageHeader';
import SidebarMenu from '../components/SidebarMenu';
const { Content } = Layout;
import DemoPage from './DemoPage';

const DemoCombinedPage2: React.FC = () => {
  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 侧边栏 */}
      <SidebarMenu
        selectedKeys={['users', 'users-list']}
        onSelect={(keys) => {
          console.log('Selected menu keys:', keys);
          // 这里可以添加路由跳转逻辑
        }}
      />

      {/* 主内容区域 */}
      <Layout style={{ marginLeft: 256, transition: 'margin-left 0.3s', background: '#FFF' }}>
        <Content style={{ minHeight: '100vh' }}>
          <div className="demo-combined-page">
            <PageHeader />
            <div style={{ padding: '0 20px' }}>
              <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#333333', padding: '24px 0 4px' }}>
                UNO Demo
              </div>
              <Tabs
                defaultActiveKey="1"
                items={[
                  {
                    label: `正常仪器`,
                    key: '1',
                  },
                  {
                    label: `使用中仪器`,
                    key: '2',
                  },
                  {
                    label: `维保仪器`,
                    key: '3',
                  },
                  {
                    label: `故障仪器`,
                    key: '4',
                  },
                  {
                    label: `废弃仪器`,
                    key: '5',
                  }
                ]}
              />
              <DemoPage></DemoPage>
            </div>
          </div>
        </Content>

      </Layout>
    </Layout>
  );
};

export default DemoCombinedPage2;